<script setup>
import axios from "axios";
import {ref, computed, watch, shallowReactive} from "vue";
import { useStore } from "vuex";

const store = useStore();

let data = ref({
  authorData: "",
  titleData: "",
  myinput: "",
})

const author = ref({
  name: "张三",
  books: [
    "VUE2",
    "VUE3",
    "VUE4",
  ]
})

const test = shallowReactive({
  person:{
    name: "张三",
    age: 18,
  }
})

watch(author.value, (newVal,oldVal) =>{
  console.log(newVal);
})

const myInput = ref('')
const num = ref(0)
const userInfo = ref('')


function mouseDown() {
  console.log("鼠标被按下了！");
}

function mouseUp() {
  console.log("鼠标被抬起了！");
}

function clickButton(){
  axios({
    method:'GET',
    url:'http://localhost:3000/posts'
  }).then(function (response) {
    console.log(response.data);
  })
}

const url = "https://jsonplaceholder.typicode.com/posts/1";

function postData(){
  // axios({
  //   method:'POST',
  //   url:'http://localhost:3000/posts',
  //   data:{
  //     author:authorData.value,
  //     title:titleData.value
  //   }
  // }).then(response =>{
  //   console.log(response.data);
  //   authorData.value = '';
  //   titleData.value = '';
  // })

  const a = new XMLHttpRequest();
    a.open("GET", `https://api.oioweb.cn/api/qq/info?qq=${data.value.myinput}`);
    a.onload = () => {
      if (JSON.parse(a.response).code >= 200 && JSON.parse(a.response).code < 300){
        console.log("请求成功");
        userInfo.value = JSON.parse(a.response).result;
      }else{
        console.log("请求失败");
        console.log(JSON.parse(a.response).msg);
      }
    }
    a.send();
}

const userInfo1 = ref([
  {
    age: "1111",
    area: "222",
    nickname: "333",
    sex: "444",
    user_id: "555",
  }
])

const myInputRef = ref(null);

function btn(){
  myInputRef.value.validate((valid) => {
    console.log(valid);
    if (!valid) return;
    author.value.books.push(myInput.value);
    myInput.value = null;
  })
}

const rules = ref({
  myInput:{ required: true, message: '请输入正确的字符', trigger: 'blur' }
})

const c = computed(() => {
  num.value++;
})

function cplus(){
  num.value++
}

watch(num,(newVal,oldVal) => {
  console.log(newVal);
})

</script>

<template>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
      <el-button type="primary" @click="store.commit('increment')">加一</el-button>
      <el-button type="primary" @click="store.commit('minus')">减一</el-button>
      <el-button type="success" @click="clickButton">发送GET请求</el-button>
      <br>
      <el-icon><User class="userIcon" /></el-icon> <el-input class="dataInput" v-model="data.authorData" placeholder="作者：" />
      <br>
      <el-icon><Lock class="userIcon" /></el-icon> <el-input class="dataInput" v-model="data.titleData" placeholder="标题：" />
      <br>
      <el-button type="primary" v-on="{ mousedown: mouseDown, mouseup: mouseUp }">鼠标事件</el-button>
      <el-button type="primary" @click="postData">发送POST请求</el-button>
      <br>
      <el-input v-model="data.myinput" class="dataInput"></el-input>
      <el-table :data="userInfo1">
        <el-table-column label="年龄" prop="age"/>
        <el-table-column label="故乡" prop="area"/>
        <el-table-column label="昵称" prop="nickname"/>
        <el-table-column label="性别" prop="sex"/>
        <el-table-column label="qq" prop="user_id"/>
      </el-table>

  <el-descriptions :column="5" border size="small">
    <el-descriptions-item :span="1" label="年龄：">
      <span class="userInfo">{{ userInfo.age }}</span>
    </el-descriptions-item>
    <el-descriptions-item :span="1" label="故乡：">
      <span class="userInfo">{{ userInfo.area }}</span>
    </el-descriptions-item>
    <el-descriptions-item :span="1" label="昵称：">
      <span class="userInfo">{{ userInfo.nickname }}</span>
    </el-descriptions-item>
    <el-descriptions-item :span="1" label="性别：">
      <span class="userInfo">{{ userInfo.sex }}</span>
    </el-descriptions-item>
    <el-descriptions-item :span="1" label="qq：">
      <span class="userInfo">{{ userInfo.user_id }}</span>
    </el-descriptions-item>
  </el-descriptions>
  <el-form :rules="rules" ref="myInputRef">
    <el-form-item prop="myInput">
      <el-input v-model="myInput"></el-input><el-button @click="btn">按钮</el-button>
    </el-form-item>
  </el-form>
  <div>{{ author.books.length > 0 ? author.books.length : 0 }}</div>
  <div>{{ author.books }}</div>
  <div>{{ c }}</div>
  <div>{{ num }}</div>
  <el-button @click="cplus">加加</el-button>
  <div>{{ test }}</div>
  <el-button @click="test.person = {name: '李四', age: 22}">修改对象的顶层属性</el-button>
  <el-button @click="test.person.name = '王五'">修改对象的下层属性</el-button>
</template>

<style scoped>
  .dataInput{
    width: 30%;
  }
  .userIcon{
    margin-top: 50px;
  }
</style>